let userPhone = document.querySelector('.userPhone');
let loginnn = document.querySelector('.loginnn');
let dialoggg = document.querySelector('.dialoggg');
let out = document.querySelector('.out');


loginnn.onclick = function () {

    location.href = '../html/login-dialog.html';
};
dialoggg.onclick = function () {

    location.href = '../html/login-dialog.html';
};

out.onclick = function () {

    setCookie('user', -1);
    location.reload();
};

let user = getCookie('user');
console.log(user)
if(!user){
    loginnn.style.display = 'block';
    dialoggg.style.display = 'block';
    userPhone.style.display = 'none';
    out.style.display = 'none';
}else{
    loginnn.style.display = 'none';
    dialoggg.style.display = 'none';
    userPhone.style.display = 'block';
    out.style.display = 'block';
};




let classfyList = document.querySelector('.classfyList'); // 分类的容器

let usersList = document.querySelector('.usersList'); // 用户卡片的容器

let pagenation = document.querySelector('.pagenation'); // 分页器的容器

// 获取分类的导航信息
getClassfyInfo();

async function getClassfyInfo() {

    let res = await pAjax({
        url: '../data/users.json'
    });
    // console.log(res);
    // console.log(JSON.parse(res));

    localStorage.setItem('classfyInfo', res);

    // 渲染分类导航
    renderClassfy(JSON.parse(res));
};

// 渲染分类导航的函数
function renderClassfy(data) {

    let str = data.map((item, index) => {

        // 把category添加到每个分类的属性上，后面渲染数据会有用；
        // 默认是给 全部 添加高亮效果；
        // 利用三目运算符，判断传进来的参数的索引是否为0，如果是0，则添加高亮，否则不添加；
        return `<a category="${item.category}" class="${index == 0 ? 'active':''}">${item.name}</a>`;

    }).join('');

    classfyList.innerHTML = str;

}

// 获取用户信息数据
getUsersData();

async function getUsersData(params) {

    let res = await pAjax({

        url: 'https://muse.huaban.com/api/v1/users/',
        data: params
    })
    // console.log(res);
    // console.log(JSON.parse(res));

    // 渲染用户信息列表
    renderUsersData(JSON.parse(res));
};

// 渲染用户列表的函数
function renderUsersData(data) {

    console.log(data);

    let tagsInfo = {
        illustrator: '插画师',
        graphic: '漫画师',
        artisan: '手工艺人',
        ui_designer: 'UI设计师',
        designer: '平面设计师',
        other: '其他',
        animator: '动画师',
        game_designer: '游戏美术师',
        stylist: '造型师',
        industrial_designer: '工业设计师',
        costume_designer: '服装设计师',
        architect: '建筑师',
        interior_designer: '室内设计师',
        household_desiger: '家居设计师',
        photographer: '摄影师'
    };


    let str = data.map(item => {

        // 渲染星星数的函数
        // 有些直接没有评价星星的
        let resStarStr = renderStars(item);

        function renderStars(a) {

            let starStr;

            // 如果存在 星星数
            if (a.extra.rating) {

                let stars = Math.round(a.extra.rating);

                switch (stars) {

                    case (5):
                        starStr = `<span>评价：<i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i></span>`;
                        break;
                    case (4):
                        starStr = `<span>评价：<i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i><i>★</i></span>`;
                        break;
                    case (3):
                        starStr = `<span>评价：<i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i><i>★</i><i>★</i></span>`;
                        break;
                    case (2):
                        starStr = `<span>评价：<i class="lighten">★</i><i class="lighten">★</i><i>★</i><i>★</i><i>★</i></span>`;
                        break;
                    case (1):
                        starStr = `<span>评价：<i class="lighten">★</i><i>★</i><i class="lighten">★</i><i>★</i><i>★</i></span>`;
                        break;
                    case (0):
                        starStr = `<span>评价：<i>★</i><i>★</i><i>★</i><i>★</i><i>★</i></span>`;
                        break;
                }
            } else {
                starStr = '';
            }

            return starStr;
        };


        // 渲染tags标签的函数，结合上面tagsInfo，将数据的英文转成中文；
        let resStr2 = tags(item.category);

        function tags(a) {

            let str2 = a.map(b => {

                return `<label>${tagsInfo[b]}</label>`;

            }).join('');

            return str2;

        };


        return `<a class="card" id="${item.user_id}">
                    <div class="up">
                        <div class="name_pic">
                            <label class="name">${item.username}</label>
                            <img src="https://hbimg.huabanimg.com/${item.avatar.key}_/both/140x140"
                                alt="设计师头像">
                        </div>
                        <div class="evaluate">
                            <span>${item.service_count}个设计服务</span>${resStarStr}
                        </div>
                        <div class="tags">
                            ${resStr2}
                        </div>
                    </div>
                    <div class="down">
                        <p>${item.desc}</p>
                    </div>
                </a>`;
    }).join('');

    usersList.innerHTML = str

    // 渲染完成之后，为每个card绑定点击事件，跳转到用户详情页，并且把id传递
    // 获取所有的card，只能在渲染完毕之后获取，因为card是渲染结构之后才有的
    skip();
};



// 为每个分类绑定点击事件，利用事件委托；
// 点击某一个分类的时候，渲染其对应的子类；
classfyList.onclick = function (e) {

    e = event || window.event;

    if (!e.target.classList.contains('classfyList')) {

        // 先清除所有的高亮，再为点击的元素添加高亮
        classfyList.querySelector('.active').classList.remove('active');
        e.target.classList.add('active');

        // 每次点击不同分类时，都要让分页器中的页码返回第一页；
        page(pagenation);

        // 获取所有数据，过滤出来这个分类的数据

        let category = e.target.getAttribute('category');


        if (!category) {

            // 如果category为空，就不带参数直接渲染页面
            // 渲染之前要先把本地保存的 category 删除，不然点击 全部 分类的时候得到的数据可能是其他分类的数据，这是因为在分页功能中会获取category这个参数；
            localStorage.removeItem('category');

            getUsersData();

        } else {

            localStorage.setItem('category', category);

            getUsersData({
                category: category
            })
        };
    };

};


// 点击设计师卡片时跳转到设计师详情页，展示所点击的设计师的详细信息
function skip() {

    let cards = document.querySelectorAll('.card');
    console.log(cards);

    for (let i = 0; i < cards.length; i++) {

        cards[i].onclick = function () {

            // 获取用户的id
            let id = this.getAttribute('id');

            // 点击跳转到用户详情页，并把id传递到参数
            location.href = `users_details.html?id=${id}`;
        };
    };
};


// 分页功能
function page(ppp) {

    new Pagenation(ppp, {
        pageInfo: {
            pagenum: 1,
            pagesize: 20,
            total: 1000,
            totalpage: 50,
        },
        textInfo: {
            first: "《",
            prev: "<",
            next: ">",
            last: "》",
        },

        // 这个分页函数存在一个问题，点击pagenation这个容器时也会触发
        // 点击分页的时候触发这个change函数
        // 这个函数有一个参数 表示当前的页数
        async change(index) {

            // 请求对应页数的数据并且再次渲染
            // 再次调用getUsersData(params)函数，并且传参，即可；
            // getUsersData({
            //     limit: 20,
            //     page: index
            // });

            let category = localStorage.getItem('category');

            // https://muse.huaban.com/users/?category=designer&limit=20&page=2
            let str = `${category?'category='+category:''}&limit=20&page=${index}`;

            getUsersData(str);

            // 重新渲染数据时，滚动条回到顶部
            scrollTo({
                top: 0,
                behavior: 'smooth'
            });

        },
    });
};
page(pagenation);


// 页面刷新或者关闭时进行的操作
window.onbeforeunload = function () {

    localStorage.removeItem('category');

};